<!-- 填写入网资料 -->
<template>
  <div class="warp">
    <div class="title">创建聚合支付商户号</div>
    <a-form-model :model="form" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" validateOnRuleChange>
      <!-- 选择主体身份 -->
      <div class="module-title">选择主体身份</div>
      <a-form-model-item
        label="签约类型"
        prop="merchantSubjectInfo.signType"
        :rules="{ required: true, message: '请输入签约类型', trigger: 'change' }"
      >
        <a-select v-model="form.merchantSubjectInfo.signType" :disabled="disabled">
          <a-select-option v-for="item in signTypeList" :value="item.value" :key="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
        <div class="desc">营业执照上的主体类型一般为个体户、个体工商户、个体经营</div>
      </a-form-model-item>
      <a-form-model-item
        label="证件编号"
        prop="merchantSubjectInfo.licenceNo"
        :rules="{ required: true, message: '请输入证件编号', trigger: 'change' }"
      >
        <a-input placeholder="请输入证件编号" v-model="form.merchantSubjectInfo.licenceNo" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item
        label="证件照片"
        prop="merchantSubjectInfo.licenceUrl2"
        :rules="{ required: true, message: '请上传证件照片', trigger: 'change' }"
      >
        <div class="fz-12">彩色照片 or 彩色扫描件 or 加盖公章鲜章的复印件</div>
        <UploadImg
          v-model="form.merchantSubjectInfo.licenceUrl2"
          :disabled="disabled"
          @change="fileList => handChangeUp(fileList, 'merchantSubjectInfo', 'licenceUrl')"
        />
      </a-form-model-item>
      <a-form-model-item
        label="商户签约名称"
        prop="merchantSubjectInfo.signName"
        :rules="{ required: true, message: '请输入商户名称', trigger: 'change' }"
      >
        <a-input placeholder="请输入商户名称" v-model="form.merchantSubjectInfo.signName" :disabled="disabled" />
        <div class="desc">与营业执照主体名称保持一致</div>
      </a-form-model-item>
      <a-form-model-item
        label="商户简称"
        prop="merchantSubjectInfo.shortName"
        :rules="{ required: true, message: '请输入商户简称', trigger: 'change' }"
      >
        <a-input placeholder="建议不超过8个字" v-model="form.merchantSubjectInfo.shortName" :disabled="disabled" />
        <div class="desc">将在收银台页面或者支付完成页向买家展示。</div>
      </a-form-model-item>
      <a-form-model-item
        label="营业执照"
        prop="merchantSubjectInfo.handLicenceUrl2"
        :rules="{ required: true, message: '请上传营业执照', trigger: 'change' }"
      >
        <div class="fz-12">手持营业执照在经营场所的照片</div>
        <UploadImg
          v-model="form.merchantSubjectInfo.handLicenceUrl2"
          :disabled="disabled"
          @change="fileList => handChangeUp(fileList, 'merchantSubjectInfo', 'handLicenceUrl')"
        />
      </a-form-model-item>
      <a-form-model-item
        label="开户许可证"
        prop="merchantSubjectInfo.openAccountLicenceUrl2"
        :rules="{ required: true, message: '请上传开户许可证', trigger: 'change' }"
      >
        <div class="fz-12">
          如果无法提供开户许可证，还可提供基本存款账户信息、印鉴卡、结算账户开户回执单、银行电子回单、企业网银登录截图。
        </div>
        <UploadImg
          v-model="form.merchantSubjectInfo.openAccountLicenceUrl2"
          :disabled="disabled"
          @change="fileList => handChangeUp(fileList, 'merchantSubjectInfo', 'openAccountLicenceUrl')"
        />
      </a-form-model-item>

      <!-- 填写法人信息 -->
      <div class="module-title">填写法人信息</div>
      <a-form-model-item
        label="法人姓名"
        prop="merchantCorporationInfo.legalName"
        :rules="{ required: true, message: '请输入证件上的法人姓名', trigger: 'change' }"
      >
        <a-input
          v-model="form.merchantCorporationInfo.legalName"
          placeholder="请输入证件上的法人姓名"
          :disabled="disabled"
        />
      </a-form-model-item>
      <a-form-model-item
        label="证件类型"
        prop="merchantCorporationInfo.legalLicenceType"
        :rules="{ required: true, message: '请选择证件类型', trigger: 'change' }"
      >
        <a-select v-model="form.merchantCorporationInfo.legalLicenceType" :disabled="disabled">
          <a-select-option v-for="item in legalLicenceTypeList" :value="item.value" :key="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="证件号码"
        prop="merchantCorporationInfo.legalLicenceNo"
        :rules="{ required: true, message: '请输入身份证号码', trigger: 'change' }"
      >
        <a-input
          v-model="form.merchantCorporationInfo.legalLicenceNo"
          placeholder="请输入身份证号码"
          :disabled="disabled"
        />
      </a-form-model-item>
      <a-form-model-item
        label="身份证人像面照片"
        prop="merchantCorporationInfo.legalLicenceFrontUrl2"
        :rules="{ required: true, message: '请上传身份证人像面照片', trigger: 'change' }"
      >
        <div class="fz-12">彩色照片 or 彩色扫描件 or 加盖公章鲜章的复印件</div>
        <UploadImg
          v-model="form.merchantCorporationInfo.legalLicenceFrontUrl2"
          :disabled="disabled"
          @change="fileList => handChangeUp(fileList, 'merchantCorporationInfo', 'legalLicenceFrontUrl')"
        />
      </a-form-model-item>
      <a-form-model-item
        label="身份证国徽面照片"
        prop="merchantCorporationInfo.legalLicenceBackUrl2"
        :rules="{ required: true, message: '请上传身份证国徽面照片', trigger: 'change' }"
      >
        <div class="fz-12">彩色照片 or 彩色扫描件 or 加盖公章鲜章的复印件</div>
        <UploadImg
          v-model="form.merchantCorporationInfo.legalLicenceBackUrl2"
          :disabled="disabled"
          @change="fileList => handChangeUp(fileList, 'merchantCorporationInfo', 'legalLicenceBackUrl')"
        />
      </a-form-model-item>

      <!-- 商户联系人信息 -->
      <div class="module-title">商户联系人信息</div>
      <a-form-model-item
        label="联系人姓名"
        prop="merchantContactInfo.contactName"
        :rules="{ required: true, message: '请输入联系人姓名', trigger: 'change' }"
      >
        <a-input v-model="form.merchantContactInfo.contactName" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item
        label="手机号码"
        prop="merchantContactInfo.contactMobile"
        :rules="{ required: true, message: '请输入手机号码', trigger: 'change' }"
      >
        <a-input v-model="form.merchantContactInfo.contactMobile" :disabled="disabled" />
        <div class="desc">用于接收聚合支付的重要管理信息及日常操作验证码</div>
      </a-form-model-item>
      <a-form-model-item
        label="联系邮箱"
        prop="merchantContactInfo.contactEmail"
        :rules="{ required: true, message: '请输入联系邮箱', trigger: 'change' }"
      >
        <a-input v-model="form.merchantContactInfo.contactEmail" :disabled="disabled" />
        <div class="desc">用于入网邮箱验证及接收重要的产品通知，请真实填写</div>
      </a-form-model-item>
      <a-form-model-item label="客服电话">
        <a-input v-model="form.merchantContactInfo.servicePhone" :disabled="disabled" />
        <div class="desc">用于展示在订单支付详情，方便买家联系商家</div>
      </a-form-model-item>

      <!-- 填写经营信息 -->
      <div class="module-title">填写经营信息</div>
      <a-form-model-item
        label="经营地址"
        prop="businessAddressInfo.district"
        :rules="{ required: true, message: '请选择经营地址', trigger: 'change' }"
      >
        <AreaPicker
          :area="{
            provinceId: form.businessAddressInfo.province,
            cityId: form.businessAddressInfo.city,
            areaId: form.businessAddressInfo.district
          }"
          :disabled="disabled"
          @getArea="getArea"
        />
      </a-form-model-item>
      <a-form-model-item
        label="详细地址"
        prop="businessAddressInfo.address"
        :rules="{ required: true, message: '请输入详细地址', trigger: 'change' }"
      >
        <a-input
          v-model="form.businessAddressInfo.address"
          placeholder="请输入详细地址，无需再写省市区"
          :disabled="disabled"
        />
      </a-form-model-item>

      <!-- 结算账户信息 -->
      <div class="module-title">结算账户信息</div>
      <a-form-model-item label="账户类型">
        <span>对公账户</span>
      </a-form-model-item>
      <a-form-model-item
        label="开户总行"
        prop="settlementAccountInfo.bankCode"
        :rules="{ required: true, message: '请选择开户总行', trigger: 'change' }"
      >
        <a-select
          v-model="form.settlementAccountInfo.bankCode"
          show-search
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          :disabled="disabled"
          @search="handleSearch"
        >
          <a-select-option v-for="item in bankCodeList" :value="item.code" :key="item.code">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="银行账号"
        prop="settlementAccountInfo.bankCardNo"
        :rules="{ required: true, message: '请输入银行账号', trigger: 'change' }"
      >
        <a-input v-model="form.settlementAccountInfo.bankCardNo" :disabled="disabled" />
      </a-form-model-item>

      <!-- 开通产品信息及费率 -->
      <div class="module-title">开通产品信息及费率</div>
      <a-form-model-item label="申请开通的支付产品">
        <span>聚合产品-小程序-微信支付-线上</span>
      </a-form-model-item>
      <a-form-model-item label="手续费计算方式">
        <span>单笔百分比</span>
      </a-form-model-item>
      <a-form-model-item label="手续费费率">
        <span>0.4%</span>
      </a-form-model-item>

      <!-- 其它资质要求 -->
      <div class="module-title">其它资质要求</div>
      <a-form-model-item label="授权证明材料">
        <div class="fz-12">
          若支付商户主体与小程序主体若不一致，需要小程序主体授权商户主体进行支付接入，若一致请忽略。请先下载授权函模板，双方盖章后拍照上传
        </div>
        <UploadImg
          v-model="form.proofOfAuthorizingUrl2"
          :disabled="disabled"
          @change="fileList => handChangeUp(fileList, 'proofOfAuthorizingUrl')"
        />
        <a-button type="primary" @click="handleLoadTemp">下载授权模板函</a-button>
      </a-form-model-item>

      <div v-if="!disabled" class="btn">
        <a-button size="large" :loading="saveLoading" @click="handleSubmit(0)">保存草稿</a-button>
        <a-button type="primary" class="submit" size="large" :loading="submitLoading" @click="handleSubmit(1)"
          >确认提交</a-button
        >
      </div>
    </a-form-model>
  </div>
</template>

<script>
import UploadImg from '@/components/UpFile/uploadImg'
import AreaPicker from '@/components/AreaPicker/index2.vue'
import {
  signTypeList,
  legalLicenceTypeList,
  YbBankList,
  Save,
  SaveAndSubmit,
  SelectInfo,
  AuthTemplate
} from '@/api/finance/finance'
import { customUpload, uploadApi } from '@/api/upload'

export default {
  props: ['id', 'disabled'],
  components: {
    UploadImg,
    AreaPicker
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        merchantSubjectInfo: {
          signType: undefined,
          licenceNo: undefined,
          licenceUrl: undefined,
          licenceUrl2: undefined,
          signName: undefined,
          shortName: undefined,
          handLicenceUrl: undefined,
          handLicenceUrl2: undefined,
          openAccountLicenceUrl: undefined,
          openAccountLicenceUrl2: undefined
        },
        merchantCorporationInfo: {
          legalName: undefined,
          legalLicenceType: undefined,
          legalLicenceNo: undefined,
          legalLicenceFrontUrl: undefined,
          legalLicenceFrontUrl2: undefined,
          legalLicenceBackUrl: undefined,
          legalLicenceBackUrl2: undefined
        },
        merchantContactInfo: {
          contactName: undefined,
          contactMobile: undefined,
          contactEmail: undefined,
          servicePhone: undefined
        },
        businessAddressInfo: {
          province: undefined,
          city: undefined,
          district: undefined,
          address: undefined
        },
        settlementAccountInfo: {
          settlementDirection: 'BANKCARD',
          bankAccountType: 'ENTERPRISE_ACCOUNT',
          bankCode: undefined,
          bankCardNo: undefined
        },
        proofOfAuthorizingUrl: undefined,
        proofOfAuthorizingUrl2: undefined,
        ybId: this.id
      },
      signTypeList,
      legalLicenceTypeList,
      bankCodeList: [],
      saveLoading: false,
      submitLoading: false,
      authTemp: ''
    }
  },
  computed: {},
  watch: {},
  methods: {
    getArea(data) {
      let { provinceId, cityId, areaId } = data

      this.form.businessAddressInfo.province = provinceId
      this.form.businessAddressInfo.city = cityId
      this.form.businessAddressInfo.district = areaId
      this.$refs.ruleForm.clearValidate('businessAddressInfo.district')
    },
    handChangeUp(successList, key1, key2) {
      const that = this;
      if (successList.length) {
        const file = successList[successList.length - 1].originFileObj
        const formData = new FormData()
        formData.append('file', file)
        customUpload(uploadApi.merchant, formData)
          .then(res => {
            key2 ? that.$set(that.form[key1], key2, res.data) : that.$set(that.form, key1, res.data);
          })
          .catch(() => {
            key2 ? that.$set(that.form[key1], `${key2}2`, undefined) : that.$set(that.form, `${key1}2`, undefined);
            this.$message.error('上传失败,请重新上传')
          })
      } else {
        key2 ? that.$set(that.form[key1], key2, undefined) : that.$set(that.form, key1, undefined);
      }
    },
    async handleSearch(value) {
      if (!value) return
      let res = await YbBankList({ keyword: value })
      this.bankCodeList = res.data || []
    },
    handleSubmit(type) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          try {
            type === 0 ? (this.saveLoading = true) : (this.submitLoading = true)
            let { code, msg } = type === 0 ? await Save({ ...this.form }) : await SaveAndSubmit({ ...this.form })
            type === 0 ? (this.saveLoading = false) : (this.submitLoading = false)
            this.$message[code === 0 ? 'success' : 'error'](msg)
            if (type === 1 && code === 0) {
              this.$emit('setCurrent', 1)
            }
          } catch (error) {
            type === 0 ? (this.saveLoading = false) : (this.submitLoading = false)
          }
        }
      })
    },
    async getSelectInfo() {
      let res = await SelectInfo({ ybId: this.id })
      this.form.merchantSubjectInfo = JSON.parse(res.data.merchantSubjectInfo)
      Object.keys(this.form).forEach(k => {
        if (this.form[k] && this.form[k].constructor === Object) {
          this.form[k] = JSON.parse(res.data[k])
        } else {
          this.form[k] = res.data[k]
        }
      })

      // 开户总行回显,因后端返回bankCode为银行名称,需重新调用查询获取银行列表,并重新赋值bankCode,因提交需要code
      if(res.data && this.form.settlementAccountInfo.bankCode){
        await this.handleSearch(this.form.settlementAccountInfo.bankCode);
        const cardInfo = this.bankCodeList.find(v=> v.name === this.form.settlementAccountInfo.bankCode);
        this.form.settlementAccountInfo.bankCode = cardInfo ? cardInfo.code : "";
      }
    },
    async getAuthTemplate() {
      let res = await AuthTemplate()
      this.authTemp = res.data
    },
    async handleLoadTemp() {
      await this.getAuthTemplate()
      window.open(this.authTemp)
    }
  },
  created() {
    this.getSelectInfo()
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
.warp {
  // padding: 20px;
  // background: #fff;
  .title {
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0;
  }

  .module-title {
    font-size: 18px;
    font-weight: bold;
    // margin: 15px 0;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 16.66%;
    text-align: right;
  }
  .desc {
    color: #999;
  }

  .btn {
    width: 100%;
    text-align: center;
    .submit {
      margin-left: 20px;
    }
  }
}
</style>
